<!doctype html>
<html lang="zh-Hans">
	<head>
		<title>关于 - 嵌入式工具集</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta
			name="description"
			content="嵌入式工具集 - 专业的电子工程计算工具，包含欧姆定律计算器、电阻色环计算器、电容换算、功率换算、电池续航计算和LED电阻计算器等功能。"
		/>
		<!-- 引入样式 -->
		<!-- 以下为浏览器中的配置，正式 编译之后请注释掉这段-->
		<link rel="stylesheet" href="styles.css" />

		<!-- 以下为LCEDA中的配置，正式 编译之后请勿注释这段-->
		<link rel="stylesheet" href="/iframe/styles.css" />

		<!-- 内联样式 - 自定义颜色和动画 -->
		<style>
			:root {
				--color-primary: #00796b;
				--color-secondary: #004d40;
				--color-accent: #1e88e5;
				--color-danger: #d32f2f;
				--color-light: #e0f7fa;
				--color-dark: #263238;
			}
		</style>
	</head>

	<body class="bg-gradient-to-br from-light to-blue-50 min-h-screen p-4 md:p-6 font-sans antialiased">
		<!-- 主容器 -->
		<div class="max-w-4xl mx-auto fade-in">
			<!-- 卡片容器 -->
			<div class="bg-white rounded-2xl shadow-xl overflow-hidden transform hover:shadow-2xl transition-all duration-500">
				<!-- 头部 -->
				<header class="bg-gradient-to-r from-primary to-secondary text-white p-6 md:p-8 relative overflow-hidden">
					<!-- 装饰背景 -->
					<div class="absolute top-0 right-0 w-full h-full opacity-10">
						<div class="absolute top-[-20px] right-[-20px] w-[150px] h-[150px] bg-white rounded-full"></div>
						<div class="absolute bottom-[-30px] left-[10%] w-[100px] h-[100px] bg-white rounded-full"></div>
					</div>

					<div class="relative z-10 flex flex-col md:flex-row items-center justify-between">
						<div class="flex items-center space-x-4 mb-4 md:mb-0">
							<div class="bg-white/20 p-3 rounded-full backdrop-blur-sm shadow-lg">
								<i class="fa fa-info-circle text-3xl float-slow"></i>
							</div>
							<div>
								<h1 class="text-2xl md:text-[clamp(1.75rem,3vw,2.5rem)] font-bold tracking-tight">关于嵌入式工具集</h1>
								<p class="text-white/80 text-sm mt-1">专业、高效的电子工程计算工具</p>
							</div>
						</div>
						<div
							class="flex items-center space-x-2 bg-white/10 px-4 py-2 rounded-full backdrop-blur-sm transition-all duration-300 hover:bg-white/20"
						>
							<i class="fa fa-microchip"></i>
							<span class="font-medium">EmbeddedTools</span>
						</div>
					</div>
				</header>

				<!-- 主要内容 -->
				<main class="p-6 md:p-8">
					<!-- 介绍部分 -->
					<section class="mb-8">
						<div class="flex items-center space-x-4 mb-6">
							<div class="bg-primary/10 p-3 rounded-full">
								<i class="fa fa-wrench text-2xl text-primary"></i>
							</div>
							<h2 class="text-2xl font-bold text-dark">工具集介绍</h2>
						</div>
						<div class="bg-gray-50 p-5 rounded-xl">
							<p class="text-gray-700 leading-relaxed mb-4">
								嵌入式工具集（EmbeddedTools）是一款专为电子工程师和嵌入式系统开发者设计的实用工具箱，提供多种常用的电子工程计算功能，帮助用户快速、准确地完成电路设计中的各种计算任务。
							</p>
							<p class="text-gray-700 leading-relaxed">
								本工具集支持在嘉立创EDA专业版插件环境和标准浏览器环境中运行，为用户提供统一的使用体验。
							</p>
						</div>
					</section>

					<!-- 功能列表 -->
					<section class="mb-8">
						<div class="flex items-center space-x-4 mb-6">
							<div class="bg-accent/10 p-3 rounded-full">
								<i class="fa fa-list-check text-2xl text-accent"></i>
							</div>
							<h2 class="text-2xl font-bold text-dark">功能模块</h2>
						</div>
						<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
							<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow">
								<div class="flex items-center space-x-3 mb-3">
									<i class="fa fa-bolt text-accent text-xl"></i>
									<h3 class="font-semibold text-dark">欧姆定律计算器</h3>
								</div>
								<p class="text-gray-600 text-sm">根据欧姆定律计算电压、电流和电阻之间的关系。</p>
							</div>
							<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow">
								<div class="flex items-center space-x-3 mb-3">
									<i class="fa fa-random text-accent text-xl"></i>
									<h3 class="font-semibold text-dark">电阻色环计算器</h3>
								</div>
								<p class="text-gray-600 text-sm">根据电阻色环计算电阻值，支持4环、5环和6环电阻。</p>
							</div>
							<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow">
								<div class="flex items-center space-x-3 mb-3">
									<i class="fa fa-database text-accent text-xl"></i>
									<h3 class="font-semibold text-dark">电容换算</h3>
								</div>
								<p class="text-gray-600 text-sm">电容单位换算，支持各种电容标示方法的转换。</p>
							</div>
							<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow">
								<div class="flex items-center space-x-3 mb-3">
									<i class="fa fa-plug text-accent text-xl"></i>
									<h3 class="font-semibold text-dark">功率换算</h3>
								</div>
								<p class="text-gray-600 text-sm">功率计算和单位换算，支持不同功率单位之间的转换。</p>
							</div>
							<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow">
								<div class="flex items-center space-x-3 mb-3">
									<i class="fa fa-battery-three-quarters text-accent text-xl"></i>
									<h3 class="font-semibold text-dark">电池续航计算</h3>
								</div>
								<p class="text-gray-600 text-sm">根据电池容量和负载电流计算电池续航时间。</p>
							</div>
							<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow">
								<div class="flex items-center space-x-3 mb-3">
									<i class="fa fa-lightbulb text-yellow-400 text-xl"></i>
									<h3 class="font-semibold text-dark">LED串联电阻计算器</h3>
								</div>
								<p class="text-gray-600 text-sm">计算LED串联电阻的最佳阻值，确保LED安全工作。</p>
							</div>
						</div>
					</section>

					<!-- 版本信息 -->
					<section class="mb-8">
						<div class="flex items-center space-x-4 mb-6">
							<div class="bg-secondary/10 p-3 rounded-full">
								<i class="fa fa-code-branch text-2xl text-secondary"></i>
							</div>
							<h2 class="text-2xl font-bold text-dark">版本信息</h2>
						</div>
						<div class="bg-gray-50 p-5 rounded-xl">
							<div class="flex flex-col md:flex-row md:items-center justify-between">
								<div>
									<p class="text-gray-700 font-medium mb-1">嵌入式工具集</p>
									<p class="text-gray-500">版本: v1.0.0</p>
								</div>
								<div>
									<p class="text-gray-700 font-medium mb-1">最后更新</p>
									<p class="text-gray-500">2025年</p>
								</div>
							</div>
						</div>
					</section>

					<!-- 联系与支持 -->
					<section>
						<div class="flex items-center space-x-4 mb-6">
							<div class="bg-green-100 p-3 rounded-full">
								<i class="fa fa-handshake text-2xl text-green-600"></i>
							</div>
							<h2 class="text-2xl font-bold text-dark">联系与支持</h2>
						</div>
						<div class="bg-gray-50 p-5 rounded-xl">
							<p class="text-gray-700 mb-4">如果您在使用过程中遇到任何问题，或者有新功能的建议，请通过以下方式联系我们：</p>
							<div class="flex flex-wrap gap-4">
								<a
									href="https://gitcode.com/Embd_HW_Lab/EmbdTools"
									target="_blank"
									class="flex items-center space-x-2 bg-white px-4 py-2 rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors"
								>
									<i class="fa fa-code-fork text-xl text-green-600"></i>
									<span>开源地址</span>
								</a>
								<a
									href="#"
									class="flex items-center space-x-2 bg-white px-4 py-2 rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors"
								>
									<i class="fa fa-envelope text-xl"></i>
									<span>邮箱联系</span>
								</a>
								<a
									href="#"
									class="flex items-center space-x-2 bg-white px-4 py-2 rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors"
								>
									<i class="fa fa-question-circle text-xl"></i>
									<span>帮助文档</span>
								</a>
							</div>
						</div>
					</section>
				</main>

				<!-- 页脚 -->
				<footer class="bg-gray-50 p-5 text-center">
					<p class="text-gray-500 text-sm mb-2">© 2025 Embedded Tools - 嵌入式硬件实验室</p>
					<div class="flex justify-center space-x-4 mt-2">
						<a href="#" class="text-gray-400 hover:text-accent transition-colors duration-300">
							<i class="fa fa-github text-lg"></i>
						</a>
						<a href="#" class="text-gray-400 hover:text-accent transition-colors duration-300">
							<i class="fa fa-twitter text-lg"></i>
						</a>
						<a href="#" class="text-gray-400 hover:text-accent transition-colors duration-300">
							<i class="fa fa-envelope text-lg"></i>
						</a>
					</div>
				</footer>
			</div>
		</div>

		<!-- JavaScript -->
		<script>
			document.addEventListener('DOMContentLoaded', function () {
				// 简单的渐入动画效果
				document.querySelectorAll('.fade-in').forEach((element, index) => {
					element.style.opacity = '0';
					element.style.animationDelay = `${index * 0.1}s`;
					element.style.animation = 'fadeIn 0.5s ease-out forwards';
				});
			});
		</script>
	</body>
</html>
